<!--
  自定义标题栏组件

  包含应用标题、tab标签页和窗口控制按钮
  替代系统默认的标题栏，提供更好的用户体验
-->

<template>
  <div class="titlebar">
    <!-- 应用信息区域 -->
    <div class="titlebar-left">
      <div class="app-icon">
        <img src="../assets/electron.svg" alt="App Icon" />
      </div>
      <div class="app-title">yuCloudEle</div>
    </div>

    <!-- Tab 标签页区域 -->
    <div class="titlebar-center">
      <div class="tabs-container">
        <div
          v-for="tab in tabs"
          :key="tab.path"
          :class="['tab', { active: isActiveTab(tab.path) }]"
          @click="switchToTab(tab.path)"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-title">{{ tab.title }}</span>
          <button
            v-if="tab.closable !== false"
            class="tab-close"
            @click.stop="closeTab(tab.path)"
            :title="`关闭 ${tab.title}`"
          >
            ×
          </button>
        </div>

        <!-- 添加新 Tab 按钮 -->
        <button class="add-tab-btn" @click="showTabMenu($event)" title="添加新标签页">
          +
        </button>

        <!-- 拖拽区域 -->
        <div class="drag-area" title="拖拽此处移动窗口"></div>
      </div>
    </div>

    <!-- 窗口控制按钮区域 -->
    <div class="titlebar-right">
      <!-- 快捷设置按钮 -->
      <div class="quick-settings">
        <!-- 主题切换按钮 -->
        <button
          class="quick-btn theme-btn"
          @click="toggleTheme"
          :title="currentTheme === 'dark' ? '切换到浅色主题' : '切换到深色主题'"
        >
          <span v-if="currentTheme === 'dark'">☀️</span>
          <span v-else>🌙</span>
        </button>

        <!-- 颜色主题选择器 -->
        <div class="color-theme-picker" :title="'当前颜色主题: ' + getColorThemeName(colorTheme)">
          <button
            class="quick-btn color-btn"
            @click="toggleColorPicker"
          >
            <span class="color-indicator" :class="`color-${colorTheme}`">🎨</span>
          </button>
          <div
            v-if="showColorPicker"
            class="color-picker-menu"
            @click.stop
          >
            <div class="color-options">
              <button
                v-for="color in colorThemeOptions"
                :key="color.value"
                class="color-option"
                :class="{ active: colorTheme === color.value }"
                @click="() => { setColorTheme(color.value as any); hideColorPicker() }"
                :title="color.name"
              >
                <span class="color-dot" :style="{ backgroundColor: color.color }"></span>
                <span class="color-name">{{ color.name }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 语言切换按钮 -->
        <button
          class="quick-btn lang-btn"
          @click="toggleLanguage"
          :title="language === 'zh-CN' ? 'Switch to English' : '切换到中文'"
        >
          <span v-if="language === 'zh-CN'">🇺🇸</span>
          <span v-else>🇨🇳</span>
        </button>

        <!-- 设置页面按钮 -->
        <button
          class="quick-btn settings-btn"
          @click="openSettings"
          title="打开设置"
        >
          ⚙️
        </button>
      </div>
      
      <!-- 分隔线 -->
      <div class="separator"></div>
      
      <!-- 窗口控制按钮 -->
      <button
        class="window-btn minimize-btn"
        @click="minimizeWindow"
        title="最小化"
      >
        <svg width="10" height="10" viewBox="0 0 10 10">
          <rect x="0" y="4" width="10" height="1" fill="currentColor"/>
        </svg>
      </button>

      <button
        class="window-btn maximize-btn"
        @click="toggleMaximize"
        :title="isMaximized ? '还原' : '最大化'"
      >
        <svg width="10" height="10" viewBox="0 0 10 10">
          <rect v-if="!isMaximized" x="0" y="0" width="10" height="10" stroke="currentColor" fill="none" stroke-width="1"/>
          <g v-else>
            <rect x="0" y="2" width="8" height="8" stroke="currentColor" fill="none" stroke-width="1"/>
            <rect x="2" y="0" width="8" height="8" stroke="currentColor" fill="none" stroke-width="1"/>
          </g>
        </svg>
      </button>

      <button
        class="window-btn close-btn"
        @click="closeWindow"
        title="关闭"
      >
        <svg width="10" height="10" viewBox="0 0 10 10">
          <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1"/>
          <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1"/>
        </svg>
      </button>
    </div>

    <!-- Tab 菜单 -->
    <div v-if="showMenu" class="tab-menu" @click.stop>
      <div class="menu-header">添加标签页</div>
      <div v-if="availableTabs.length === 0" class="menu-empty">
        所有页面都已打开
      </div>
      <div
        v-for="availableTab in availableTabs"
        :key="availableTab.path"
        class="menu-item"
        @click="handleMenuItemClick(availableTab, $event)"
        @mousedown="console.log('mousedown on:', availableTab.title)"
        @mouseup="console.log('mouseup on:', availableTab.title)"
      >
        <span class="menu-icon">{{ availableTab.icon }}</span>
        <span class="menu-title">{{ availableTab.title }}</span>
      </div>
    </div>
  </div>

  <!-- 遮罩层 -->
  <div v-if="showMenu" class="menu-overlay" @click="hideTabMenu"></div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { routeConfig } from '../router'
import { useSettings } from '../stores/settings'

const route = useRoute()
const router = useRouter()

// 设置和国际化
const { currentTheme, colorTheme, language, toggleTheme, setColorTheme, toggleLanguage } = useSettings()

// 响应式数据
const tabs = ref([
  {
    path: '/',
    title: '欢迎页面',
    icon: '🏠',
    closable: false // 首页不可关闭
  }
])

const isMaximized = ref(false)
const showMenu = ref(false)
const showColorPicker = ref(false)

// 颜色主题选项
const colorThemeOptions = [
  { value: 'blue', name: '蓝色', color: '#007bff' },
  { value: 'green', name: '绿色', color: '#28a745' },
  { value: 'purple', name: '紫色', color: '#6f42c1' },
  { value: 'orange', name: '橙色', color: '#fd7e14' },
  { value: 'red', name: '红色', color: '#dc3545' },
  { value: 'teal', name: '青色', color: '#20c997' },
  { value: 'pink', name: '粉色', color: '#e83e8c' },
  { value: 'indigo', name: '靛蓝', color: '#6610f2' }
]

// 可添加的标签页（排除已打开的）
const availableTabs = computed(() => {
  const openPaths = tabs.value.map(tab => tab.path)
  return routeConfig.filter(route => !openPaths.includes(route.path))
    .map(route => ({
      path: route.path,
      title: (route.meta?.title as string) || '未知页面',
      icon: (route.meta?.icon as string) || '📄'
    }))
})

/**
 * 判断是否为活动标签页
 */
const isActiveTab = (path: string): boolean => {
  return route.path === path
}

/**
 * 切换到指定标签页
 */
const switchToTab = (path: string): void => {
  router.push(path)
}

/**
 * 关闭标签页
 */
const closeTab = (path: string): void => {
  const index = tabs.value.findIndex(tab => tab.path === path)
  if (index === -1) return

  const tab = tabs.value[index]
  if (tab.closable === false) return // 不可关闭的标签页

  // 如果关闭的是当前活动标签页，需要切换到其他标签页
  if (route.path === path) {
    // 优先切换到右边的标签页，否则切换到左边
    const nextIndex = index < tabs.value.length - 1 ? index + 1 : index - 1
    if (nextIndex >= 0 && nextIndex < tabs.value.length) {
      const nextTab = tabs.value[nextIndex]
      router.push(nextTab.path)
    } else {
      // 如果没有其他标签页，回到首页
      router.push('/')
    }
  }

  // 移除标签页
  tabs.value.splice(index, 1)
}

/**
 * 处理菜单项点击
 */
const handleMenuItemClick = (
  tabInfo: { path: string; title: string; icon: string }, 
  event?: Event
): void => {
  console.log('=== 菜单项被点击 ===')
  console.log('点击的标签页信息:', tabInfo)

  // 阻止事件传播
  if (event) {
    event.stopPropagation()
    event.preventDefault()
  }

  addTab(tabInfo)
}

/**
 * 添加新标签页
 */
const addTab = (tabInfo: { path: string; title: string; icon: string }) => {
  console.log('=== 添加新标签页 ===')
  console.log('标签页信息:', tabInfo)

  tabs.value.push({
    path: tabInfo.path,
    title: tabInfo.title,
    icon: tabInfo.icon,
    closable: true
  })

  console.log('当前标签页列表:', tabs.value)

  // 先隐藏菜单
  hideTabMenu()

  // 延迟导航，确保菜单关闭
  setTimeout(() => {
    router.push(tabInfo.path)
  }, 50)
}

/**
 * 显示标签页菜单
 */
const showTabMenu = (event?: Event) => {
  console.log('=== 点击了添加标签按钮 ===')
  console.log('可用标签页数量:', availableTabs.value.length)
  console.log('可用标签页:', availableTabs.value)

  // 阻止事件冒泡
  if (event) {
    event.stopPropagation()
    event.preventDefault()
  }

  // 如果菜单已显示，则隐藏；否则显示
  if (showMenu.value) {
    hideTabMenu()
  } else {
    showMenu.value = true
    console.log('菜单显示状态:', showMenu.value)

    // 添加延迟的点击监听器来关闭菜单
    setTimeout(() => {
      document.addEventListener('click', handleOutsideClick, { once: true })
    }, 100)
  }
}

/**
 * 隐藏标签页菜单
 */
const hideTabMenu = () => {
  showMenu.value = false
}

/**
 * 隐藏颜色选择器
 */
const hideColorPicker = () => {
  showColorPicker.value = false
  document.removeEventListener('click', handleColorPickerClick)
}

/**
 * 处理颜色选择器外部点击
 */
const handleColorPickerClick = (event: Event) => {
  const target = event.target as HTMLElement
  const colorPicker = document.querySelector('.color-picker-menu')
  const colorBtn = document.querySelector('.color-btn')

  // 如果点击的不是颜色选择器或按钮，则关闭选择器
  if (colorPicker && !colorPicker.contains(target) && colorBtn && !colorBtn.contains(target)) {
    hideColorPicker()
  }
}

/**
 * 处理点击菜单外部区域
 */
const handleOutsideClick = (event: Event) => {
  const target = event.target as HTMLElement
  const tabMenu = document.querySelector('.tab-menu')
  const addTabBtn = document.querySelector('.add-tab-btn')

  // 如果点击的不是菜单或按钮，则关闭菜单
  if (tabMenu && !tabMenu.contains(target) && addTabBtn && !addTabBtn.contains(target)) {
    hideTabMenu()
  }
}

/**
 * 最小化窗口
 */
const minimizeWindow = async () => {
  try {
    await window.api.window.minimize()
  } catch (error) {
    console.error('最小化窗口失败:', error)
  }
}

/**
 * 切换最大化状态
 */
const toggleMaximize = async () => {
  try {
    await window.api.window.toggleMaximize()
    // 注意：这里应该监听窗口状态变化事件来更新 isMaximized
    isMaximized.value = !isMaximized.value
  } catch (error) {
    console.error('切换最大化状态失败:', error)
  }
}

/**
 * 关闭窗口
 */
const closeWindow = async () => {
  try {
    await window.api.window.close()
  } catch (error) {
    console.error('关闭窗口失败:', error)
  }
}

/**
 * 打开设置页面
 */
const openSettings = (): void => {
  router.push('/settings')
  hideTabMenu() // 如果菜单是打开的，先关闭它
}

/**
 * 获取颜色主题名称
 */
const getColorThemeName = (themeValue: string): string => {
  const option = colorThemeOptions.find(opt => opt.value === themeValue)
  return option?.name || '未知'
}

/**
 * 切换颜色选择器显示状态
 */
const toggleColorPicker = (event?: Event) => {
  if (event) {
    event.stopPropagation()
    event.preventDefault()
  }

  if (showColorPicker.value) {
    hideColorPicker()
  } else {
    // 先关闭其他菜单
    hideTabMenu()
    
    showColorPicker.value = true
    
    // 添加延迟的点击监听器来关闭菜单
    setTimeout(() => {
      document.addEventListener('click', handleColorPickerClick, { once: true })
    }, 100)
  }
}

/**
 * 监听路由变化，自动添加标签页
 */
const handleRouteChange = () => {
  const currentPath = route.path

  // 检查当前路由是否已在标签页中
  const existingTab = tabs.value.find(tab => tab.path === currentPath)

  if (!existingTab) {
    // 查找路由配置
    const routeInfo = routeConfig.find(r => r.path === currentPath)
    if (routeInfo) {
      tabs.value.push({
        path: currentPath,
        title: (routeInfo.meta?.title as string) || '未知页面',
        icon: (routeInfo.meta?.icon as string) || '📄',
        closable: currentPath !== '/' // 首页不可关闭
      })
    }
  }
}

// 生命周期
onMounted(() => {
  // 初始化时检查当前路由
  handleRouteChange()

  // 监听路由变化
  router.afterEach(() => {
    setTimeout(() => {
      handleRouteChange()
    }, 50)
  })

  // 添加键盘事件监听器
  document.addEventListener('keydown', handleKeyDown)

  console.log('TitleBar组件已挂载')
  console.log('初始路由配置:', routeConfig)
  console.log('初始标签页:', tabs.value)
})

// 键盘快捷键处理
const handleKeyDown = (event: KeyboardEvent) => {
  // Ctrl+W 关闭当前标签页
  if (event.ctrlKey && event.key === 'w') {
    event.preventDefault()
    if (route.path !== '/') {
      closeTab(route.path)
    }
  }

  // Ctrl+T 添加新标签页
  if (event.ctrlKey && event.key === 't') {
    event.preventDefault()
    showTabMenu()
  }

  // Ctrl+Tab 切换标签页
  if (event.ctrlKey && event.key === 'Tab') {
    event.preventDefault()
    const currentIndex = tabs.value.findIndex(tab => tab.path === route.path)
    const nextIndex = (currentIndex + 1) % tabs.value.length
    router.push(tabs.value[nextIndex].path)
  }
}

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('click', handleOutsideClick)
  document.removeEventListener('click', handleColorPickerClick)
  hideTabMenu() // 确保菜单关闭
  hideColorPicker() // 确保颜色选择器关闭
})
</script>

<style scoped>
.titlebar {
  display: flex;
  height: 32px;
  background: var(--nav-bg, #2d3748);
  color: var(--text-primary, white);
  user-select: none;
  position: relative;
  z-index: 1000;
  -webkit-app-region: drag; /* 允许拖拽窗口 */
  border-top: 1px solid var(--nav-border, #4a5568);
  border-bottom: 2px solid var(--primary-color, #4299e1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 左侧应用信息 */
.titlebar-left {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  min-width: 150px;
  -webkit-app-region: drag;
}

.app-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #e2e8f0);
}

/* 中央标签页区域 */
.titlebar-center {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-app-region: drag; /* 标签页区域允许拖拽 */
}

.tabs-container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 移除拖拽设置，让子元素单独控制 */
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 28px;
  background: var(--bg-tertiary, #4a5568);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 120px;
  max-width: 200px;
  position: relative;
  margin-top: 2px;
  -webkit-app-region: no-drag; /* 标签页按钮不允许拖拽 */
  color: var(--text-primary, white);
}

.tab:hover {
  background: var(--bg-hover, #5a6578);
}

.tab.active {
  background: var(--bg-primary, #1a202c);
  margin-top: 0;
  height: 30px;
  border-top: 2px solid var(--primary-color, #4299e1);
}

.tab-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.tab-title {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-close {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--text-muted, #a0aec0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.tab-close:hover {
  background: var(--error-color, #e53e3e);
  color: white;
}

.add-tab-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color, #4a5568);
  background: var(--bg-secondary, #2d3748);
  color: var(--text-muted, #a0aec0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 300;
  margin-left: 4px;
  transition: all 0.2s ease;
  -webkit-app-region: no-drag; /* 添加按钮不允许拖拽 */
  z-index: 10;
  position: relative;
  flex-shrink: 0;
}

.add-tab-btn:hover {
  background: var(--primary-bg, rgba(0, 123, 255, 0.1));
  color: var(--primary-color, #007bff);
  border-color: var(--primary-color, #007bff);
}

.drag-area {
  flex: 1;
  height: 32px;
  min-width: 50px;
  -webkit-app-region: drag;
  cursor: move;
  background: transparent;
  transition: background-color 0.2s ease;
  order: 2; /* 确保拖拽区域在标签页和按钮之间 */
}

.drag-area:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* 右侧窗口控制 */
.titlebar-right {
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag; /* 控制按钮不允许拖拽 */
}

.window-btn {
  width: 46px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted, #a0aec0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.window-btn:hover {
  background: var(--bg-hover, #4a5568);
  color: var(--text-primary, white);
}

.close-btn:hover {
  background: var(--error-color, #e53e3e) !important;
  color: white !important;
}

/* 快捷设置按钮 */
.quick-settings {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}

.quick-btn {
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted, #a0aec0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s ease;
  -webkit-app-region: no-drag;
}

.quick-btn:hover {
  background: var(--bg-hover, #4a5568);
  color: var(--text-primary, white);
  transform: scale(1.05);
}

.theme-btn:hover {
  background: var(--primary-color, #667eea);
}

.color-btn:hover {
  background: var(--primary-bg, rgba(0, 123, 255, 0.2));
  color: var(--primary-color, #007bff);
}

.lang-btn:hover {
  background: var(--success-color, #48bb78);
}

.settings-btn:hover {
  background: var(--primary-color, #ed8936);
}

/* 分隔线 */
.separator {
  width: 1px;
  height: 20px;
  background: var(--border-color, #4a5568);
  margin: 0 8px;
  opacity: 0.3;
}

/* 标签页菜单 */
.tab-menu {
  position: absolute;
  top: 32px;
  right: 140px; /* 调整位置，避免被窗口控制按钮遮挡 */
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 6px;
  box-shadow: var(--shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  z-index: 1001;
  min-width: 200px;
  color: var(--text-primary, #2d3748);
  max-height: 300px;
  overflow-y: auto;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: auto;
}

.menu-header {
  padding: 12px 16px;
  background: var(--bg-secondary, #f7fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #4a5568);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1002;
  pointer-events: auto;
  -webkit-app-region: no-drag;
  color: var(--text-primary, #2d3748);
}

.menu-item:hover {
  background: var(--bg-hover, #edf2f7);
}

.menu-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.menu-title {
  font-size: 13px;
  flex: 1;
}

.menu-empty {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
}

.test-item {
  background: #e3f2fd !important;
  border-bottom: 1px solid #bbdefb;
  color: #1976d2 !important;
}

.test-item:hover {
  background: #bbdefb !important;
}

/* 颜色主题选择器样式 */
.color-theme-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.color-indicator {
  position: relative;
}

.color-picker-menu {
  position: absolute;
  top: 32px;
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  min-width: 180px;
  color: #2d3748;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.color-options {
  padding: 8px;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  color: #2d3748;
}

.color-option:hover {
  background: #f7fafc;
}

.color-option.active {
  background: #e2e8f0;
  color: #1a202c;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.color-name {
  font-size: 13px;
  font-weight: 500;
}

/* 暗色主题下的颜色选择器 */
.theme-dark .color-picker-menu {
  background: var(--card-bg, #2d3748);
  border-color: var(--card-border, #4a5568);
  color: var(--text-primary, #f7fafc);
}

.theme-dark .color-option {
  color: var(--text-primary, #f7fafc);
}

.theme-dark .color-option:hover {
  background: var(--bg-hover, #4a5568);
}

.theme-dark .color-option.active {
  background: var(--bg-hover, #4a5568);
  color: var(--text-primary, white);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .titlebar-left {
    min-width: 100px;
    padding: 0 8px;
  }

  .app-title {
    display: none;
  }

  .tab {
    min-width: 80px;
    max-width: 120px;
    padding: 0 8px;
  }

  .window-btn {
    width: 40px;
  }
}

@media (max-width: 480px) {
  .titlebar-left {
    min-width: 60px;
  }

  .app-icon {
    width: 14px;
    height: 14px;
  }

  .tab {
    min-width: 60px;
    max-width: 100px;
    padding: 0 6px;
  }

  .tab-title {
    font-size: 11px;
  }
}
</style>
